import { type FAQItem } from "@/base-framework/types/landing";

export default function FAQ({ items }: { items: FAQItem[] }) {
  if (!items?.length) return null;
  return (
    <section id="faq" aria-labelledby="faq-title" className="w-full">
      <div className="mx-auto max-w-screen-xl px-6 py-16">
        <h2 id="faq-title" className="text-2xl md:text-3xl font-semibold mb-8">
          Frequently Asked Questions
        </h2>
        <div className="grid gap-4">
          {items.map((qa, i) => (
            <details key={i} className="rounded-lg border border-black/10 dark:border-white/15 p-4">
              <summary className="cursor-pointer text-base font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
                {qa.q}
              </summary>
              <p className="mt-2 text-sm text-foreground/80">{qa.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

